<template>
	<div>
		<basic-container>
			<ul class="tab_menu">
				<li v-for="(item, index) in tabMenuArr" :key="`tabmenu_${index}`" @click="tabChange(index)">{{ item }}
				</li>
			</ul>
			<el-row>
				<el-col :span='5' style="width:300px">
					<el-form label-width="90px">
						<el-form-item label="设备名称: ">
							{{equipmentFindObject.name}}
						</el-form-item>
						<el-form-item label="设备编码: ">
							{{projectInfoData.coded}}
						</el-form-item>
						<el-form-item label="设备型号: ">
							{{projectInfoData.marking}}
						</el-form-item>
						<el-form-item label="设备品牌: ">
							{{projectInfoData.brand}}
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span='18' :offset="1" style="border-left:1px dotted #DCDFE6;margin-left: 0;">
				<el-form ref="form" :model="sizeForm" label-width="80px" size="mini" :inline="true">
					<el-form-item label="筛选时间">
						<el-select v-model="sizeForm.time" @change="changeList" placeholder="今日">
							<el-option label="今日" :value="1"></el-option>
							<el-option label="2天内" :value="2"></el-option>
							<el-option label="3天内" :value="3"></el-option>
							<el-option label="4天内" :value="4"></el-option>
							<el-option label="5天内" :value="5"></el-option>
							<el-option label="15天内" :value="15"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item size="mini">
						<el-button type="primary" @click="onSearch()">搜索</el-button>
						<!-- <el-button @click="sizeForm = {}, seachEquipmentTypeIds = []">清空</el-button> -->
					</el-form-item>
				</el-form>
					<div id="pieView" class="chart"></div>
				</el-col>
			</el-row>
		</basic-container>
        <basic-container v-if="typeShow == 1">
        	<ul class="tab_menu">
        		<li v-for="(item, index) in tabMenuArr" :key="`tabmenu_${index}`" @click="tabChange(index)">{{ item }}
        		</li>
        	</ul>
        	<el-row >
        		<el-col :span='5' style="width:300px">
        			<el-form label-width="90px">
        				<el-form-item label="设备名称: ">
        					{{equipmentFindEquipmentseLectElObject.name}}
        				</el-form-item>
        				<el-form-item label="设备编码: ">
        					{{equipmentFindEquipmentseLectElObject.coded}}
        				</el-form-item>
        				<el-form-item label="设备型号: ">
        					{{equipmentFindEquipmentseLectElObject.marking}}
        				</el-form-item>
        				<el-form-item label="设备品牌: ">
        					{{equipmentFindEquipmentseLectElObject.brand}}
        				</el-form-item>
						<el-form-item label="设备ID: ">
							{{equipmentFindEquipmentseLectElObject.deviceId}}
						</el-form-item>
        			</el-form>
        		</el-col>
        			<el-col :span='18' :offset="1" style="border-left:1px dotted #DCDFE6;margin-left: 0;">
        			<div id="pieViewP" class="chart"></div>
        		</el-col>
        	</el-row>
        </basic-container>
	</div>
</template>

<script>
	import {
		getStore
	} from '@/util/store'
	import * as echarts from 'echarts';
	import {
		selectSoilNow,
		dashboardDataSelectSporeStatusNow,
		dashboardDataSelectFluxNow,
		dashboardDataSelectStationMin30Now,
		dashboardDataSelectRainNow,
		dashboardDataSelectLampStatusNow,
		dashboardDataSelectHouseNow,
		dashboardDataSelectCo2Now,
		dashboardDataSelectInsecticidalNow,
		dashboardDataSelectElectricNow,
		equipmentFindById,
		equipmentFindEquipmentseLectEl
	} from "@/api/ledger/progect"

	export default {
		name: "",
		data() {
			return {
				sizeForm: {
					time: 1,

				},
				classActiveNum: 0,
				mainLine: null,
				myChartLine: null,
				tabMenuArr: ["基本信息"],
				myChart: null,
				myChart1: null,
				projectId: getStore({
					name: 'projectId'
				}),
				projectInfoData: {
					name: '',
					number: '',
					description: '',
					startTime: '',
					endTime: ''
				},
				name: '',
				myChartData: {
					dengerousCount: 0,
					dengerousData: [],
					consumablesCount: 0,
					consumablesData: []
				},
				selectDay: 1,
				equipmentFindObject: {},
				typeShow: -1,
				equipmentFindEquipmentseLectElObject:{}
			}
		},
		mounted() {
			// console.log("this.$route.query.deviceId: ", this.$route..query.deviceId);
			// let name = this.$route.query.name
			// this.name = name
			// this.statusName()
			this.equipmentFindByIdPost()
		},
		methods: {
			changeList(){
			   this.equipmentFindByIdPost()
			},
			equipmentFindByIdPost() {
				equipmentFindById({
					id: this.$route.query.id
				}).then(res => {
					console.log("res.data: ", res.data.data);
					this.equipmentFindObject = res.data.data
					this.projectInfoData = res.data.data
					if (this.equipmentFindObject.elcId !== ''&& this.equipmentFindObject.elcId !==null) {
						this.typeShow = 1
						this.dashboardDataSelectElectricNowPost(this.equipmentFindObject.elcId)
						this.equipmentFindEquipmentseLectElPost()
					}
					this.statusName()
				})
			},
			//不同数据调用不同接口
			statusName() {
				let name = this.equipmentFindObject.name
				if(this.typeShow == 1){
					this.dashboardDataSelectElectricNowPost(this.equipmentFindObject.elcId)
				}
				if (name == '孢子扑捉仪') {
					this.dashboardDataSelectSporeStatusNowpPost()
				} else if (name == '土壤温湿度传感器') {
					this.selectSoilNowPost()
				} else if (name == '虫情测报灯') {
					this.dashboardDataSelectLampStatusNowPost()
				} else if (name == '杀虫灯') {
					this.dashboardDataSelectInsecticidalNowPost()
				} else if (name == '农田能量系统') {
					this.dashboardDataSelectFluxNowPost()
				} else if (name == '干湿沉降仪') {
					this.dashboardDataSelectRainNowPost()
				} else if (name == '智能插座') {
					this.dashboardDataSelectElectricNowPost(this.equipmentFindObject.deviceId)
				} else if (name == '气象站') {
					this.dashboardDataSelectStationMin30NowPost()
				} else if (name == '土壤剖面二氧化碳系统') {
					this.dashboardDataSelectCo2NowPost()
				} else if (name == '温室气体采集仪') {
					this.dashboardDataSelectHouseNowPost()
				}
			},
			onSearch() {
				this.statusName()
				console.log("this.sizeForm: ", this.sizeForm.time);
				// this.handleList(this.sizeForm)
				// this.sizeForm = {}
			},
			//查找
			equipmentFindEquipmentseLectElPost(){
				equipmentFindEquipmentseLectEl({
					elcId:this.equipmentFindObject.elcId
				}).then(res =>{
					 this.equipmentFindEquipmentseLectElObject = res.data.data
				})
			},
			//智能插座
			dashboardDataSelectElectricNowPost(deviceId) {
				dashboardDataSelectElectricNow({
					deviceId: deviceId,
					day: this.sizeForm.time,
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						let ylist = [{
								name: '电流',
								key: 'i',
								data: []
							},
							{
								name: '电压',
								key: 'v',
								data: []
							}
						]
						let data = []
						ylist.map((item) => {
							data.push({
								name: item.name,
								type: 'line',
								stack: 'Total',
								data: this.getData(item.key, list)
							})
						})
						if (this.typeShow == 1) {
							this.setPieP(data, res.data.data.dates)
						} else {
							this.setPie(data, res.data.data.dates)
						}
					}else{
						if (this.typeShow == 1) {
							this.setPieP(null,null)
						} else {
							this.setPie(null,null)
						}
						
					}
				})
			},
			//杀虫灯
			dashboardDataSelectInsecticidalNowPost() {
				dashboardDataSelectInsecticidalNow({
					day: this.sizeForm.time,
					deviceId: this.$route.query.deviceId,
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						let ylist = [{
								name: '灯管状态 0：正常, 1：保护、',
								key: 'tbs',
								data: []
							},
							{
								name: '光控状态 0：正常, 1：保护',
								key: 'lps',
								data: []
							},
							{
								name: '雨控状态 0：正常, 1：保护',
								key: 'rps',
								data: []
							},
							{
								name: '温控状态 0：正常, 1：保护',
								key: 'tps',
								data: []
							},
							{
								name: '倾倒状态 0：正常, 1：保护',
								key: 'dps',
								data: []
							},
							{
								name: '主板温度 (默认主板温度：25)',
								key: 'bt',
								data: []
							}
						]
						let data = []
						ylist.map((item) => {
							data.push({
								name: item.name,
								type: 'line',
								stack: 'Total',
								data: this.getData(item.key, list)
							})
						})
						this.setPie(data, res.data.data.dates)
					}else{
						this.setPie(null,null)
					}

				})
			},
			//土壤剖面二氧化碳系统
			dashboardDataSelectCo2NowPost() {
				dashboardDataSelectCo2Now({
					day: this.sizeForm.time,
					deviceId: this.$route.query.deviceId,
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						let ylist = [{
								name: '电压值 单位：V',
								key: 'batt_volt_Min',
								data: []
							},
							{
								name: '面板温度 单位：C',
								key: 'PTemp',
								data: []
							},
							{
								name: '二氧化碳1低平均值 单位：ppm',
								key: 'Co2_Low_1_Avg',
								data: []
							},
							{
								name: '二氧化碳1高平均值 单位：ppm',
								key: 'Co2_High_1_Avg',
								data: []
							},
							{
								name: '温度1平均值 单位C',
								key: 'Temp_1_Avg',
								data: []
							}
						]
						let data = []
						ylist.map((item) => {
							data.push({
								name: item.name,
								type: 'line',
								stack: 'Total',
								data: this.getData(item.key, list)
							})
						})
						this.setPie(data, res.data.data.dates)
					}else{
						this.setPie(null,null)
					}
				})
			},
			//温室气体
			dashboardDataSelectHouseNowPost() {
				dashboardDataSelectHouseNow({
					day: this.sizeForm.time,
					deviceId: this.$route.query.deviceId,
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						let ylist = [{
								name: 'FRAC_DAYS_SINCE_JAN1',
								key: 'frac_DAYS_SINCE_JAN1',
								data: []
							},
							{
								name: 'FRAC_HRS_SINCE_JAN1',
								key: 'frac_HRS_SINCE_JAN1',
								data: []
							},
							{
								name: 'JULIAN_DAYS',
								key: 'julian_DAYS',
								data: []
							},
							{
								name: 'EPOCH_TIME',
								key: 'epoch_TIME',
								data: []
							},
							{
								name: 'ALARM_STATUS',
								key: 'alarm_STATUS',
								data: []
							}
						]
						let data = []
						ylist.map((item) => {
							data.push({
								name: item.name,
								type: 'line',
								stack: 'Total',
								data: this.getData(item.key, list)
							})
						})
						this.setPie(data, res.data.data.dates)
					}else{
						this.setPie(null,null)
					}
				})
			},
			//测报灯
			dashboardDataSelectLampStatusNowPost() {
				dashboardDataSelectLampStatusNow({
					day: this.sizeForm.time,
					deviceId: this.$route.query.deviceId,
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						let ylist = [{
								name: '雨控状态 1：雨控，0：正常，',
								key: 'rps',
								data: []
							},
							{
								name: '光控状态 1：光控，0：正常',
								key: 'lps',
								data: []
							},
							{
								name: '温控状态 1：温控，0：正常',
								key: 'tps',
								data: []
							},
							{
								name: '通道状态 1：落虫，0：排水',
								key: 'gs',
								data: []
							}
						]
						let data = []
						ylist.map((item) => {
							data.push({
								name: item.name,
								type: 'line',
								stack: 'Total',
								data: this.getData(item.key, list)
							})
						})
						this.setPie(data, res.data.data.dates)
					}else{
						this.setPie(null,null)
					}
				})
			},
			//干湿沉降仪
			dashboardDataSelectRainNowPost() {
				dashboardDataSelectRainNow({
					day: this.sizeForm.time,
					deviceId: this.$route.query.deviceId,
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						console.log("list: ",list);
						let ylist = [{
								name: '始降雨时间',
								key: 'start',
								data: []
							},
							{
								name: '结束降雨时间',
								key: 'end',
								data: []
							},
							{
								name: '降雨量',
								key: 'amount',
								data: []
							},
							{
								name: '降雨强度',
								key: 'intensity',
								data: []
							}
						]
						let data = []
						ylist.map((item) => {
							data.push({
								name: item.name,
								type: 'line',
								stack: 'Total',
								data: this.getData(item.key, list)
							})
						})
						this.setPie(data, res.data.data.dates)
					}else{
						this.setPie(null,null)
					}
				})
			},
			//气象站
			dashboardDataSelectStationMin30NowPost() {
				dashboardDataSelectStationMin30Now({
					day: this.sizeForm.time,
					deviceId: this.$route.query.deviceId
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						let ylist=[
							{
								name:'面板温度 单位：C',
								key:'PTemp',
								data:[]
							},
							{
								name:'风速平均值 单位：m/s"',
								key:'ws_mean',
								data:[]
							},
							{
								name:'风向平均值 单位：deg',
								key:'wd_mean',
								data:[]
							},
							{
								name:'风向标准差 单位：deg',
								key:'wd_std',
								data:[]
							},
							{
								name:'压力平均值 单位hpa',
								key:'press_Avg',
								data:[]
							}
						]
						let data = []
						ylist.map((item) => {
							data.push({
								name: item.name,
								type: 'line',
								stack: 'Total',
								data:this.getData(item.key,list)
							})
						})
						this.setPie(data, res.data.data.dates)
					}else{
						this.setPie(null,null)
					}
				})
			},

			//气象站
			dashboardDataSelectStationMin30NowPost() {
				dashboardDataSelectStationMin30Now({
					day:this.sizeForm.time,
					deviceId: this.$route.query.deviceId,
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						let ylist=[
							{
								name:'面板温度 单位：C',
								key:'PTemp',
								data:[]
							},
							{
								name:'风速平均值 单位：m/s"',
								key:'ws_mean',
								data:[]
							},
							{
								name:'风向平均值 单位：deg',
								key:'wd_mean',
								data:[]
							},
							{
								name:'风向标准差 单位：deg',
								key:'wd_std',
								data:[]
							},
							{
								name:'压力平均值 单位hpa',
								key:'press_Avg',
								data:[]
							}
						]
						let data = []
						ylist.map((item) => {
							data.push({
								name: item.name,
								type: 'line',
								stack: 'Total',
								data:this.getData(item.key,list)
							})
						})
						this.setPie(data, res.data.data.dates)
					}else{
						this.setPie(null,null)
					}
				})
			},
			//农田能量系统数据展示
			dashboardDataSelectFluxNowPost() {
				dashboardDataSelectFluxNow({
					day: this.sizeForm.time,
					deviceId: this.$route.query.deviceId,
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						let ylist = [{
								name: '二氧化碳通量数据质量等级',
								key: 'fc_QC',
								data: []
							},
							{
								name: '二氧化碳通量采样数',
								key: 'fc_samples',
								data: []
							},
							{
								name: '潜热通量数据质量等级',
								key: 'le_QC',
								data: []
							},
							{
								name: '感热通量数据质量等级',
								key: 'h_QC',
								data: []
							}
						]
						let data = []
						ylist.map((item) => {
							data.push({
								name: item.name,
								type: 'line',
								stack: 'Total',
								data: this.getData(item.key, list)
							})
						})
						this.setPie(data, res.data.data.dates)
					}else{
						this.setPie(null,null)
					}
				})
			},
			//(孢子仪)
			dashboardDataSelectSporeStatusNowpPost() {
				dashboardDataSelectSporeStatusNow({
					day: this.sizeForm.time,
					deviceId: this.$route.query.deviceId
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						let ylist = [{
								name: '电压-(单位：V)',
								key: 'v_bat',
								data: []
							},
							{
								name: '电池状态 0：正常， 1：电量过低',
								key: 'bat_sta',
								data: []
							},
							{
								name: '摄像头状态 0：正常, 1：异常',
								key: 'usb_sta',
								data: []
							},
							{
								name: '风机开关 0：关闭， 1：开启',
								key: 'wind_sw',
								data: []
							}
						]
						let data = []
						ylist.map((item) => {
							data.push({
								name: item.name,
								type: 'line',
								stack: 'Total',
								data: this.getData(item.key, list)
							})
						})
						this.setPie(data, res.data.data.dates)
					}else{
						this.setPie(null,null)
					}
				})
			},
			//土壤温湿度传感器
			selectSoilNowPost() {
				selectSoilNow({
					deviceId: this.$route.query.deviceId,
					day: this.sizeForm.time
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						let list = []
						res.data.data.datas.map((item) => {
							list.push(item[0])
						})
						let arrdata = this.unique(list)
						let data = []
						arrdata.map((item) => {
							let ydata = []
							list.filter((list) => {
								return list.ename == item.ename
							}).map((l) => {
								ydata.push(l.evalue)
							})
							data.push({
								name: item.ename,
								type: 'line',
								stack: 'Total',
								data: ydata
							})
						})
						this.setPie(data, res.data.data.dates)
					}else{
						this.setPie(null,null)
					}
				})
			},
			unique(arr) {
				const res = new Map();
				return arr.filter((a) => !res.has(a.ename) && res.set(a.ename, 1))
			},
			getData(key, list) {
				let data = []
				list.map((item) => {
					data.push(item[key])
				})
				return data
			},
			setPieP(data, times) {
			   times = times || []
				data = data || [{
					name: '',
					type: 'line',
					stack: 'Total',
					data: [0]
				}]
				var chartDom = document.getElementById('pieViewP');
				var myChart = echarts.init(chartDom);
				myChart.resize({
					width: 800,
				
				});
				var option;
				option = {
					title: {
						text: ''
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: data
					},
					grid: {
						left: '1%',
						right: '4%',
						bottom: '4%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: times
					},
					yAxis: {
						type: 'value'
					},
					series: data
				};
				myChart.clear();
				option && myChart.setOption(option);
			},
			setPie(data, times) {
				times = times || []
				data = data || [{
					name: '',
					type: 'line',
					stack: 'Total',
					data: [0]
				}]
				var chartDom = document.getElementById('pieView');
				var myChart = echarts.init(chartDom);
				myChart.resize({
					width: 800,
				
				});
				var option;
				option = {
					title: {
						text: ''
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: data
					},
					grid: {
						left: '1%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: times
					},
					yAxis: {
						type: 'value'
					},
					series: data
				};
				myChart.clear();
				option && myChart.setOption(option);
			}
		}


	};
</script>

<style scoped>
	.chart {
		width: 500px;
		height: 350px;
		margin: 40px 
	}

	.tab_menu {
		overflow: hidden;
		margin-bottom: 30px;
		padding-left: 15px;
		background-color: #fff;
		border-radius: 4px;
		font-size: 14px;
		position: relative;
	}

	ec-canvas {
		width: 100%;
		height: 100;
	}
</style>
